<template>
    <div class="user-view youke">
        <van-nav-bar :title="$route.meta.name" fixed class="navs" @click-right="onClickRight">
            <i class="iconfont icontuichu login-out" slot="right"/>
        </van-nav-bar>
        <Main>
            <template slot="main">
                <div class="user-group">
                    <div class="user-head" @click="personalFun">
                        <div class="user-head-content">
                            <div class="user-head-img">
                                <img :src="$store.getters.info.image" alt>
                            </div>
                            <div class="user-head-msg">
                                <div>{{$store.getters.info.cname}}</div>
                                <div>{{$store.getters.info.mobile}}</div>
                            </div>
                        </div>
                        <div>
                            <van-icon name="arrow"/>
                        </div>
                    </div>
                    <div class="user-cell-link">
                        <van-cell title="我的资产" is-link to="/property/index" :value="`${zhichan.cjf}枚`">
                            <img src="~@/assets/user/my-a.png" class="user-cell-icon" slot="icon" alt>
                        </van-cell>
                        <van-cell title="资产转账" is-link to="/property/transfer">
                            <img src="~@/assets/user/my-b.png" class="user-cell-icon" slot="icon" alt>
                        </van-cell>
                        <van-cell title="我的订单" is-link to="/order/index">
                            <img src="~@/assets/user/my-c.png" class="user-cell-icon" slot="icon" alt>
                        </van-cell>
                        <!--<van-cell title="推荐分享" is-link to="/share/index">-->
                            <!--<img src="~@/assets/user/my-d.png" class="user-cell-icon" slot="icon" alt>-->
                        <!--</van-cell>-->
                        <van-cell title="支付绑定" is-link to="/user/payment">
                            <img src="~@/assets/user/my-e.png" class="user-cell-icon" slot="icon" alt>
                        </van-cell>
                        <van-cell title="设置密码" is-link to="/user/password">
                            <img src="~@/assets/user/my-f.png" class="user-cell-icon" slot="icon" alt>
                        </van-cell>
                        <van-cell title="联系客服" is-link @click="dialog = true">
                            <img src="~@/assets/user/contact.png" class="user-cell-icon" slot="icon" alt>
                        </van-cell>

                        <van-dialog v-model="dialog" title="联系客服" show-cancel-button confirmButtonText="确认" class="dialog">
                            <div v-if=" '' ==contact">
                                <van-loading/>
                                <p>请稍等，正在获取...</p>
                            </div>
                            <div v-else>
                                <img :src="contact" alt="" class="contact-img">
                                <!--<img src="~@/assets/img/ercode.png" alt="" class="contact-img">-->
                            </div>
                        </van-dialog>
                    </div>
                </div>
            </template>
        </Main>
        <!-- <Tabbar></Tabbar> -->
    </div>
</template>

<script type="text/ecmascript-6">
    import {clearTimeout} from "timers";
    import {service} from "@/api";
    import {Dialog} from 'vant';

    // import {user} from '@/api';

    export default {
        //接收父级传递的参数
        props: [],
        //监听数据变化
        watch: {
            dialog(val){
                if(val){
                    document.getElementsByClassName('tabbar-footer')[0].style.display = "none";
                }else{
                    document.getElementsByClassName('tabbar-footer')[0].style.display = "block";
                }
            }
        },
        data() {
            return {
                show: false,
                contact: '',
                dialog: false,
            };
        },
        //实例初始化之前触发事件
        beforeCreate() {
        },
        //实例化之后触发事件
        created() {
        },
        //实时监控data参数数据变化
        computed: {
            zhichan() {
                return this.$store.getters.zhichans
            }
        },
        //模板组件
        components: {},
        //执行方法
        methods: {
            copys() {
                this.$copy(this.contact).then(res => {
                    this.$toast("复制成功");
                });
                document.getElementsByClassName('tabbar-footer')[0].style.display = "block";
            },
            onClickRight() {
                this.$store.dispatch("outlogins").then(res => {
                    if (res.code == 1000) {
                        this.$router.push('/user/login')
                    }

                })
            },
            personalFun() {
                this.$router.push("/user/personal");
            }
        },
        mounted() {
            this.$store.dispatch("addinfo");
            this.$store.dispatch("addzhichan");
            service.get().then(res => {
                if (res.code == 1000) {
                    this.contact = res.result;
                }
            });
        }
    };
</script>

<style scoped lang="less">
    .van-dialog {
        .van-loading {
            text-align: center;
            width: 100%;
        }
        text-align: center;
        p{
            margin-bottom: 0.5rem;
        }

    }

    .user-view {
        height: inherit;
        background: #fff;

        .login-out {
            font-size: 1.375rem;
        }

        .user-group {
            .user-head {
                box-shadow: 0px 1px 8px #ededed;
                width: 19.5625rem;
                height: 6.25rem;
                margin: 1rem auto 0;
                padding: 0 1rem;
                border-radius: 4px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .user-head-content {
                    display: flex;

                    .user-head-img {
                        width: 3.75rem;
                        height: 3.75rem;
                        background: #ededed;
                        border-radius: 50%;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            display: inline-block;
                        }
                    }

                    .user-head-msg {
                        margin-left: 1rem;
                        padding-top: 0.5rem;
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                    }
                }
            }

            .user-cell-link {
                margin-top: 2rem;

                .user-cell-icon {
                    display: inline-block;
                    width: 1.375rem;
                    height: 1.375rem;
                    vertical-align: middle;
                    margin-right: 0.5rem;
                }
            }
        }
    }
    .contact-img{
        width: 10rem;
        height: 10rem;
    }
</style>
